<template>
	<el-dialog v-dialogDrag="picDialogDragFn" showScale custom-class="picDialog" :title="title" :visible.sync="visible" 
	:close-on-click-modal="false" :close-on-press-escape="false"
		width="800px">
		<div class="d-flex a-cneter j-center">
			 <el-image :style="{width: bodywidth+'px',height: bodyheight+'px'}" :src="imgUrl" fit="contain"></el-image>
		</div>
	</el-dialog>
</template>

<script>
	export default {
		data() {
			return {
				visible: false,
				bodywidth:800,
				bodyheight:450,
				title:'',
				imgUrl:''
			}
		},
		created() {},
		computed: {
		},
		watch: {},
		methods: {
			picDialogDragFn(e){
				if(e){
					if(e.bodywidth){
						this.bodywidth = e.bodywidth;
					}
					if(e.bodyheight){
						this.bodyheight = e.bodyheight;
					}
				}
			},
			update(url,title) {
				const dragDom = document.getElementsByClassName('picDialog');
				if(dragDom&&dragDom[0]){
					dragDom[0].style.width = '800px';
					dragDom[0].style.height = '514px';
				}
				this.bodywidth = 800;
				this.bodyheight = 450;
				this.imgUrl = url;
				this.title = title||'';
				this.visible = true;
			},
		}
	}
</script>

<style lang="less" scoped>
	.form {
		width: 540px;
	}
	:deep(.el-dialog__header){
		padding: 20px!important;
	}
	:deep(.el-dialog__body){
		padding: 0px!important;
	}
	:deep(.el-dialog__headerbtn){
		font-size: 25px!important;
		top:15px;
	}
	.dplayer{
		height: 450px;
	}
</style>